<template>
    <div class="slider-check-box" @touchmove.prevent>
        <div class="slider-check" :class="rangeStatus ? 'success' : ''">
            <i @mousedown="rangeMove" @touchmove.prevent="rangeMove" @touchstart.prevent="rangeMove" :class="rangeStatus ? successIcon : startIcon">
>>
                
            </i>
            {{ rangeStatus ? successText : startText }}
        </div>
    </div>
</template>
<script>
export default {
    props: {
        successFun: {
            type: Function
        },
        successIcon: {
            type: String,
            default: 'el-icon-success'
        },
        successText: {
            type: String,
            default: '验证成功'
        },
        startIcon: {
            type: String,
            default: 'el-icon-d-arrow-right'
        },
        startText: {
            type: String,
            default: '请拖住滑块，拖动到最右边'
        },
        errorFun: {
            type: Function
        },
        status: {
            type: String
        }
    },
    data() {
        return {
            disX: 0,
            rangeStatus: false
        }
    },
    methods: {
        rangeMove(e) {
            let ele = e.target
            let startX = e.clientX
            let eleWidth = ele.offsetWidth
            let parentWidth = ele.parentElement.offsetWidth
            let MaxX = parentWidth - eleWidth
            if (this.rangeStatus) {
                return false
            }
            document.onmousemove = e => {
                let endX = e.clientX
                this.disX = endX - startX
                if (this.disX <= 0) {
                    this.disX = 0
                }
                if (this.disX >= MaxX - eleWidth) {
                    this.disX = MaxX
                }
                ele.style.transition = '.1s all'
                ele.style.transform = 'translateX(' + this.disX + 'px)'
                e.preventDefault()
            }
            document.onmouseup = () => {
                if (this.disX !== MaxX) {
                    ele.style.transition = '.5s all'
                    ele.style.transform = 'translateX(0)'
                    this.errorFun && this.errorFun()
                } else {
                    this.rangeStatus = true
                    if (this.status) {
                        this.$parent[this.status] = true
                    }
                    this.successFun && this.successFun()
                }
                document.onmousemove = null
                document.onmouseup = null
            }
        }
    }
}
</script>
<style lang="scss" scoped>
$blue: #198eeb;

@mixin jc-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-check-box {
    .slider-check {
        background-color: #e9e9e9;
        position: relative;
        transition: 1s all;
        user-select: none;
        color: #585858;
        @include jc-flex;
        height: 40px;

        &.success {
            background-color: $blue;
            color: #fff;

            i {
                color: $blue;
            }
        }
        &:hover {
            background-color: $blue;
            color: $blue;

            i {
                color: $blue;
            }
        }

        &:active {
            background-color: $blue;
            color: $blue;

            i {
                color: $blue;
            }
        }
        i {
            position: absolute;
            left: 0;
            width: 50px;
            height: 100%;
            color: $blue;
            background-color: #fff;
            border: 1px solid #d8d8d8;
            cursor: pointer;
            font-size: 24px;
            @include jc-flex;
        }
    }
}
</style>
